import { useState } from "react";
/* 直接这样引入，会和同名的css类名冲突，详见 App.css 中的 .list-group */
// import "./ListGroup.css"; // ✅，但是会同名冲突
// import "./ListGroup.module.css"; ❌
// import styles from "./ListGroup.css"; // ❌
// import styles from "./ListGroup.module.css"; // ✅

// css in js
import styled from "styled-components";

const List = styled.ul`
  list-style: none;
  padding: 0;
`;
interface ListItemProps {
  active: boolean;
}

const ListItem = styled.li<ListItemProps>`
  padding: 5px 0;
  background: ${(props) => (props.active ? "lightblue" : "none")};
`;

/**
 * Author: A Song of Ice and Fire
 * Create Time: 2023/09/15 00:09:51
 * Description:
 *  state是函数组件的内部状态，就像函数内部的局部变量
 *  props是函数组件的外部参数，我们应该视其为不可变的 immutable & unchangeable
 *  so props are like function arguments and state is like local variables inside a function
 *  but
 *  one thing they both have in common is that: state 或者 props 的改变都会触发组件的重新渲染
 */

interface Props {
  items: { id: number; name: string }[];
  heading: string;
  onSelectItem: (item: { id: number; name: string }) => void;
}

function LisGroup({ items, heading, onSelectItem }: Props) {
  const [selectedIndex, setSelectedIndex] = useState(-1);

  // 小括号用于明确指定要返回的 JSX 表达式
  return (
    // 每个组件只能返回一个 JSX 元素，如果需要返回多个元素，需要用一个父元素包裹起来
    // <> <Fragment> 用于包裹多个元素，不会在 DOM 中创建新节点
    <>
      <h1 className="text-3xl font-bold underline">{heading}</h1>
      {items.length === 0 && <p>No item found</p>}
      <List>
        {items.map((item, index) => (
          <ListItem
            active={index === selectedIndex}
            key={item.id}
            onClick={() => {
              setSelectedIndex(index);
              onSelectItem(item);
            }}
          >
            {item.name}
          </ListItem>
        ))}
      </List>
    </>
  );
}

export default LisGroup;
